<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/d3.min.js"></script>
	<title>Hello-Image</title>
</head>
<body>
	<svg width="2030" height="950" id="mainsvg" class="svgs"></svg>
	<script>
		let svg = d3.select("#mainsvg")
		const width = +svg.attr('width');
      	const height = +svg.attr('height');
		let imgdir = '../data/subnautica.jpg';
		// let imgdir = 'http://127.0.0.1:11666/static/data/Cyclops.jpg'
		
		let ratioImg = ['none', 'xMidYMid slice', 'xMidYMid meet', 
					'xMinYMin slice', 'xMaxYMax meet'];

		svg.selectAll('.priimage').data(ratioImg).join('image')
		.attr('class', 'priimage')
		.attr("x", (d, i) => i * 360 + 180).attr("y", 100)
		.attr('width', 250).attr('height', 250)
		.attr('preserveAspectRatio', d => d)
		.attr("href", imgdir);

		svg.selectAll('.uptext').data(ratioImg).join('text')
		.attr('text-anchor', 'middle').attr('font-size', '1.5em')
		.attr("x", (d, i) => i * 360 + 180 + 125).attr("y", 380)
		.text(d => d).attr('class', 'uptext')

		let ratiocircle = 
		[{patternUnits: "objectBoundingBox", r: 'none', id: 'thenone'}, 
		 {patternUnits: "objectBoundingBox", r: 'xMidYMid slice', id: 'themeetmid'}, 
		 {patternUnits: "objectBoundingBox", r: 'xMidYMid meet', id: 'theslice'}, 
		 {patternUnits: "objectBoundingBox", r: 'xMinYMin meet', id: 'themeetmin'}, 
		 {patternUnits: "userSpaceOnUse", r: 'none', id: 'userspace'}];

		svg.selectAll('.downtext').data(ratiocircle).join('text')
		.attr('text-anchor', 'middle').attr('font-size', '1.5em')
		.attr("x", (d, i) => i * 360 + 180 + 125).attr("y", 760)
		.text(d => d.patternUnits === 'userSpaceOnUse'? 
		'none (userSpaceOnUse)' : d.r)
		.attr('class', 'downtext')

		var defs = svg.append('defs');
		defs.selectAll('.mypattern').data(ratiocircle).join('pattern')
		.attr('class', 'mypattern')
		.attr("id", d => d.id)
		.attr("width", d => d.patternUnits === 'objectBoundingBox'? 1 : 250)
		.attr("height", d => d.patternUnits === 'objectBoundingBox'? 1 : 250)
		.attr("patternUnits", d => d.patternUnits)
		.append("svg:image")
		.attr("href", imgdir)
		.attr('preserveAspectRatio', d => d.r)
		.attr("width", 250)
		.attr("height", 250);

		svg.selectAll(".mycircle").data(ratiocircle).join('circle')
		.attr('class', 'mycircle')
		.attr("cx", (d, i) => i * 360 + 180 + 125)
		.attr("cy", 600)
		.attr("r", 125)
		.attr('stroke', 'black').attr('stroke-width', '2px')
		.attr("fill", d => `url(#${d.id})`);
		
	</script>
</body>
</html>